<template>
  <el-popover width="300" trigger="click" popper-class="custom-popover" v-model="visible" @show="showPane = true"
              @hide="showPane = false">
    <div class="color-border" slot="reference">
      <div v-if="!isBackgroundColor" class="color-border-box" :style="{
                    background: formatColor(colorValue, activeTheme),
                }">
        <i class="iconfont icon-arrow-down arrow"></i>
      </div>
      <div v-else class="color-border-box" :style="backgroundColor">
        <i class="iconfont icon-arrow-down arrow"></i>
      </div>
    </div>
    <slot v-if="showPane"></slot>
  </el-popover>
</template>
<script>
  import {mapState} from "vuex";
  import {formatColor,formatLinearColor} from "@/utils";

  export default {
    name: "popovers",
    props: {
      colorValue: {
        type: String,
        default: ''
      },
      backgroundColorObject: {
        type: Object,
        default: () => {
          return {}
        }
      },
      isBackgroundColor: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        formatColor: formatColor,
        formatLinearColor:formatLinearColor,
        visible: false,
        showPane: false
      };
    },
    mounted() {
      this.$EventBus.$on('popoverHide', (msg) => {
        this.visible = msg;
      });
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme
      }),
      backgroundColor() {
        const {backgroundColor = '', linearGradient = {}} = this.backgroundColorObject
        if (backgroundColor && backgroundColor.length > 0) {
          return {background: formatColor(backgroundColor, this.activeTheme)};
        } else if (linearGradient.colors && linearGradient.colors.length > 0) {
          return {background: `linear-gradient(${this.formatLinearColor(linearGradient.direction)}, ${linearGradient.colors.join(',')})`}
        }
      }
    },
  };
</script>
<style lang="less" scoped>
  /deep/ .el-popover {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  .color-border {
    width: 28px;
    height: 28px;
    padding: 4px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: transparent;

    .color-border-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #999;
      background-image: url();

      .arrow {
        color: #fff;
        font-size: 16px;
      }
    }
  }
</style>
